<template>
  <div class="config-container">
    <el-card class="config-card">
      <div class="card-header">
        <h2>系统配置</h2>
      </div>
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="配置修改" name="gameConfig">
          <div class="config-item" v-for="(item, index) in gameConfigItems" :key="index">
            <div class="item-header">
              <span>{{ item.name }}</span>
            </div>
            <div class="item-content">
              <el-input
                type="textarea"
                :disabled="true"
                :rows="4"
                v-model="item.content"
                :placeholder="'请输入' + item.name"
              ></el-input>
            </div>
            <div class="item-footer">
              <el-button type="primary" plain @click="openJsonEditor(item)">编辑</el-button>
              <el-button type="primary" @click="saveConfig(item)">保存</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="其它配置" name="otherConfig">
          <div class="config-item" v-for="(item, index) in otherConfigItems" :key="index">
            <div class="item-header">
              <span>{{ item.name }}</span>
            </div>
            <div class="item-content">
              <el-input
                type="textarea"
                :rows="4"
                v-model="item.content"
                :placeholder="'请输入' + item.nmae"
              ></el-input>
            </div>
            <div class="item-footer">
              <el-button type="primary" plain @click="openJsonEditor(item)">编辑</el-button>
              <el-button type="primary" @click="saveConfig(item)">保存</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- JSON编辑弹出层 -->
    <el-dialog 
      title="JSON编辑器" 
      :visible.sync="jsonEditorVisible" 
      width="70%" 
      :before-close="handleDialogClose"
    >
      <div class="json-editor-container">
        <div class="json-editor-content">
          <el-input
            type="textarea"
            :rows="20"
            v-model="editingJsonString"
            placeholder="请输入JSON格式数据"
            :autosize="{ minRows: 20, maxRows: 40 }"
          ></el-input>
        </div>
        <div class="json-editor-preview" v-if="formattedJson">
          <pre>{{ formattedJson }}</pre>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button type="primary" @click="saveJsonEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { configList,configUpdate } from '@/api/user'
export default {
  name: 'ConfigPage',
  data() {
    return {
      activeTab: 'gameConfig',
      jsonEditorVisible: false,
      editingItem: null,
      editingJsonString: '',
      formattedJson: '',
      gameConfigItems: [
        {
          id: 'signin_reward',
          name: '签到奖励',
          content: '{"3":{"type":"gold","value":1000000},"5":{"type":"gold","value":2000000},"12":{"type":"gold","value":5000000},"21":{"type":"gold","value":10000000}}'
        },
        {
          id: 'signin_lottery',
          name: '签到抽奖',
          content: '{"1":{"type":"gold","value":2000000,"quality":30},"2":{"type":"gold","value":2000000,"quality":70},"3":{"type":"gold","value":5000000,"quality":150},"4":{"type":"gold","value":2000000,"quality":500},"5":{"type":"gold","value":2000000,"quality":150},"6":{"type":"gold","value":2000000,"quality":70},"7":{"type":"gold","value":10000000,"quality":20}}'
        },
        {
          id: 'vip',
          name: 'VIP',
          content: '[{"id":1,"title":"vip1","money":10000,"gold":0,"totalFreeNum":32,"totalSignNum":7,"freeNum":1,"freeGold":2000000,"giveLimit":2000000000,"giveStartLimit":1000000000,"avatar":1,"recvGold":30000000,"friendLimit":25,"feeRate":0.02,"desc":"* Dapatkan 30M koin emas dan paket hadiah\\n* Dapat mempercepat permainan\\n* Dapatkan 1 bonus gratis\\n* Limit kirim harian: 2B\\n* VIP 5 ke atas gratis biaya layanan","withdrawalDaily":30000},{"id":2,"title":"vip2","money":50000,"gold":0,"totalFreeNum":32,"totalSignNum":14,"freeNum":2,"freeGold":2000000,"giveLimit":10000000000,"giveStartLimit":10000000000,"avatar":2,"recvGold":50000000,"friendLimit":50,"feeRate":0.02,"desc":"* Dapatkan 50M koin emas dan paket hadiah\\n* Dapat mempercepat permainan\\n* Dapatkan 2 bonus gratis\\n* Limit kirim harian: 10B\\n* VIP 5 ke atas gratis biaya layanan","withdrawalDaily":60000}]'
        },
        {
          id: 'gold_mall',
          name: '金币商城',
          content: '[{"id":1,"money":10000,"firstSend":0,"gold":600000000,"give":0},{"id":2,"money":30000,"firstSend":0,"gold":1800000000,"give":2000000000},{"id":3,"money":50000,"firstSend":0,"gold":3000000000,"give":3000000000},{"id":4,"money":100000,"firstSend":0,"gold":6000000000,"give":10000000000},{"id":5,"money":250000,"firstSend":0,"gold":15000000000,"give":50000000000},{"id":6,"money":500000,"firstSend":0,"gold":30000000000,"give":100000000000}]'
        },
        {
          id: 'weekly_card',
          name: '周卡',
          content: '[{"id":1,"money":50000,"dailyGold":500000000,"taskGold":500000000,"slotPlay":25000000000}]'
        }
      ],
      otherConfigItems: [
        {
          id: 'system_notice',
          name: '系统公告',
          content: '欢迎使用游戏配置系统'
        },
        {
          id: 'maintenance',
          name: '维护配置',
          content: '{"status":false,"message":"系统正在维护中，请稍后再试"}'
        }
      ]
    }
  },
  created(){
this.init()
  },
  methods: {
    async init(){
      console.log('111111111');
      
      let n=  await configList({})
      if(n.code==0){
        this.gameConfigItems=n.data.configs
      }
      console.log('2222222222');
    },
    saveConfig(item) {
      // 这里可以实现保存配置的逻辑，例如调用API
      this.$message({
        message: `${item.label}保存成功`,
        type: 'success'
      })
      console.log('保存配置:', item.id, item.value)
    },
    openJsonEditor(item) {
      this.editingItem = item
      
      this.editingJsonString = item.content
      this.formatJson()
      this.jsonEditorVisible = true
    },
    formatJson() {
      try {
        // 尝试解析JSON
        const jsonObj = JSON.parse(this.editingJsonString)
        // 格式化JSON并添加缩进
        this.formattedJson = JSON.stringify(jsonObj, null, 2)
      } catch (e) {
        console.error('JSON解析错误:', e)
        this.formattedJson = '无效的JSON格式'
      }
    },
    async saveJsonEdit() {
      try {
        // 验证JSON是否有效
        JSON.parse(this.editingJsonString)
        
        // 移除JSON中的空格和换行符
        const compactJson = JSON.stringify(JSON.parse(this.editingJsonString))
        
        let n=await configUpdate(JSON.stringify({type:this.editingItem.type,content:compactJson}))
        // 更新原始数据
        if(n==0){
          this.init()
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          
          this.jsonEditorVisible = false

        }
      } catch (e) {
        this.$message({
          message: '无效的JSON格式，请检查后重试',
          type: 'error'
        })
      }
    },
    handleDialogClose() {
      this.jsonEditorVisible = false
      this.editingItem = null
      this.editingJsonString = ''
      this.formattedJson = ''
    }
  },
  watch: {
    editingJsonString() {
      this.formatJson()
    }
  }
}
</script>

<style scoped>
.config-container {
  padding: 20px;
}

.config-card {
  margin-bottom: 20px;
}

.card-header {
  margin-bottom: 20px;
}

.config-item {
  margin-bottom: 30px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.item-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.item-content {
  margin-bottom: 15px;
}

.item-footer {
  text-align: right;
}

/* JSON编辑器样式 */
.json-editor-container {
  display: flex;
  flex-direction: column;
}

.json-editor-content {
  margin-bottom: 15px;
}

.json-editor-preview {
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f5f7fa;
  max-height: 300px;
  overflow: auto;
}

.json-editor-preview pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

@media (min-width: 992px) {
  .json-editor-container {
    flex-direction: row;
  }
  
  .json-editor-content {
    flex: 1;
    margin-right: 15px;
    margin-bottom: 0;
  }
  
  .json-editor-preview {
    flex: 1;
    max-height: 500px;
  }
}
</style> 